<template>
	<view class="myPage">
		<view class="myPageTop">
			<image src="../../static/img/user.png" mode="" class="myImg"></image>
			<text>员工工号：1001201</text>
		</view>
		<view class="myLst">
			<view class="myItem" v-for="(item,key) in myLst" :key="key">
				<text class="myItemLabel">{{item.label}}</text>
				<view class="myItemR"  @click="doSomthing(item)">
					<text class="myItemDetail">
						{{item.detail}} 
						<text style="margin-left: 20.83rpx;" v-if="item.arrow">></text>
					</text>
					<u-switch v-if="item.switch" v-model="item.checked"></u-switch>	
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	name: '',
	components: {
	},
	data() {
		return {
			myLst:[{
				label:'个人信息',
				detail:'编辑',
				arrow:true,
				switch:false,
				url:'/pages/my/user'
			},{
				label:'工资条',
				detail:'4月份已发放',
				arrow:true,
				switch:false,
				url:'/pages/my/salary'
			},{
				label:'变更手机号',
				detail:'18805180081',
				arrow:true,
				switch:false,
				url:''
			},{
				label:'通知提醒',
				detail:'',
				arrow:false,
				switch:true,
				checked:true,
				url:''
			},{
				label:'自动上下班打卡',
				detail:'',
				arrow:false,
				switch:true,
				checked:false,
				url:''
			},{
				label:'联系我们',
				detail:'025-87733693',
				arrow:false,
				switch:false,
				url:'',
				status:'call'
			},{
				label:'关于我们',
				detail:'中科南京信息高铁研究院',
				arrow:true,
				switch:false,
				url:'/pages/my/company'
			}]
		}
	},
	methods: {
		doSomthing(obj){
			if(obj.url){
				uni.navigateTo({
					url:`${obj.url}`,
					animationType: 'pop-in',
					animationDuration: 200
				})
			}
			if(obj.status == "call"){
				uni.makePhoneCall({
				 	// 手机号
				    phoneNumber: obj.detail, 
					// 成功回调
					success: (res) => {
						console.log('调用成功!')	
					},
					// 失败回调
					fail: (res) => {
						console.log('调用失败!')
					}
				  })
			}
		}
	},
	onReady(){
	    
	},
};
</script>

<style scoped lang="scss">
.myPageTop{
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	height: 375rpx;
	background-color: $themeColor;
	color:#fff;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	.myImg{
		width:145.83rpx;
		height: 145.83rpx;
		border-radius: 100%;
		margin-bottom: 31.25rpx;
	}
}
.myLst{
	padding:0 31.25rpx;
	margin-top: 375rpx;
	.myItem{
		border-bottom: 1px solid #EEEEEE;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding:31.25rpx 0;
		.myItemR{
			.myItemDetail{
				color:#888888;
				font-size: 25rpx;
			}
		}
		
	}
}
</style>
